<template>
  <!-- 圆形进度条 -->
  <div class="circle-progress">
    <!-- <van-circle v-model="currentRate" stroke-width="80" :rate="progress" layer-color="#f8aba6" color="#d44439"  size="25px" :speed="100"  /> -->
    <i class="iconfont" @click="changeAction" :class="{ 'icon-zanting2': !value, 'icon-zanting1': value }"></i>
  </div>
</template>

<script  type='module'>
export default {
  data () {
    return {
      currentRate: 60
      // rate:60
    }
  },
  props: {
    value: Boolean,
    progress: Number
  },
  methods: {
    changeAction () {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style scoped lang="less">
// .circle-progress {
//   text-align: center;
//   width: 25px;
//   height: 25px;
//   position: relative;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);

  .iconfont {
    position: absolute;
    font-size: 22px;
    top: 50%;
    left: 50%;
    line-height: 25px;
    transform: translate(-50%, -50%);
  }
// }
</style>
